import High from "@/comps/High";
import OffAutoComplete from "@/comps/OffAutoComplete";
import { selectRoot } from "@/store/rootSlice";
import * as bs from '@/util/bs';
import {get, post, postJson} from '@/util/http';

import { log } from "@/util/tio";
import { Button, Form, Input, Select, Link, Pagination, Space, Typography } from '@arco-design/web-react';
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";


const FormItem = Form.Item;

const Option = Select.Option;
const options = ['iot', 'edu'];


function PageDemo() {

  const root = useSelector(selectRoot);
  const dispatch = useDispatch();

  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [])


  return (
    <div>
      <Space wrap>
        <Form
          form={form}
          style={{ width: 600 }}
          autoComplete="off"
          // wrapperCol={{
          //   span: 24
          // }}
          onValuesChange={(v, vs) => {
            log(v, vs);
          }}
          onSubmit={async (v) => {
            log(JSON.stringify(v, null, 2));
            let resp = await get(`/tiocase/list`, v, null, {arrayFormat: 'comma'})
            log(resp)
          }}
        >
          <OffAutoComplete></OffAutoComplete>


          {/* 设置控件初始值.(初始值，请不要使用受控组件的defaultValue了) */}
          <FormItem field='types'
            initialValue=''
            label="案例分类"
            // rules={[{ required: true, message: 'username is required' }]}
            >
            <Select
              mode='multiple'
              placeholder='Please select'
              style={{ width: 345 }}
              defaultValue={['Beijing', 'Shenzhen']}
              allowClear
            >
              {options.map((option) => (
                <Option key={option} value={option}>
                  {option}
                </Option>
              ))}
            </Select>
          </FormItem>



          <FormItem
            wrapperCol={{
              offset: 5,
            }}
          >
            <Space size='medium'>
              <Button
                type='primary'
                htmlType='submit'
              >
                查 询
              </Button>


              <Button
                onClick={() => {
                  form.resetFields();
                }}
              >
                Reset
              </Button>
            </Space>
          </FormItem>

          <Pagination defaultCurrent={5} total={200} sizeCanChange />,

        </Form>
      </Space>

      <High language="json" showLineNumbers>
        {/* {JSON.stringify(root.curr, null, 2)} */}
      </High>
    </div>
  );
}
export default PageDemo;
